<template>
  <div class="ui_feedback">
    <van-nav-bar title="意见反馈">
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
    </van-nav-bar>
    <!--<div class="feedback_trouble_container">-->
    <!--<div class="feedback_trouble_tip">您觉得哪里有多问题？（可多选）</div>-->
    <!--<van-checkbox-group v-model="checkedTroubleList">-->
    <!--<van-checkbox-->
    <!--v-for="(trouble, index) in troubleList"-->
    <!--:key="index"-->
    <!--:name="trouble.name">-->
    <!--{{ trouble.name }}-->
    <!--</van-checkbox>-->
    <!--</van-checkbox-group>-->
    <!--</div>-->
    <div class="feedback_your_suggestion_container">
      <div class="feedback_trouble_tip">请写下您的意见</div>
      <textarea class="feedback_your_suggestion_textarea" maxlength="200" v-model="feedBackSuggestion"></textarea>
      <div class="feedback_your_suggestion_left_input">还可输入{{ leftInputNumber }}字</div>
    </div>
    <div class="feedback_your_contact_container">
      <div class="feedback_your_contact_text feedback_trouble_tip">您的联系方式：</div>
      <input class="feedback_your_contact_input" type="text" v-model="mobileNo">
    </div>
    <div class="feedback_submit_btn_container">
      <button class="feedback_submit_btn"
              :class="feedBackSuggestion === '' ? 'disable' : ''"
              :disabled="feedBackSuggestion===''"
              @click="submitFeedback">提交</button>
    </div>
  </div>
</template>

<script type="text/babel">
  import { beeUserFeedback } from 'services/beeUserFeedBack';

  export default {
    name: 'FeedBack',
    data() {
      return {
        // troubleList: [
        //   { name: '功能太少' },
        //   { name: '页面太丑' },
        //   { name: '流程有问题' },
        //   { name: '有bug' },
        //   { name: '有新需求' },
        //   { name: '其他' }
        // ],
        // checkedTroubleList: [],
        feedBackSuggestion: '',
        mobileNo: '',
        userInfo: {
          userNo: 'c4d1a091362245e1935ca534cd007de6'
        },
        leftInputNumber: 200
      };
    },
    watch: {
      feedBackSuggestion(newValue) {
        this.leftInputNumber = 200 - newValue.length;
      }
    },
    methods: {
      back() {
        this.$router.go(-1);
      },
      submitFeedback() {
        // 提交反馈
        const postData = {
          content: this.feedBackSuggestion,
          mobileNo: this.mobileNo,
          // userNo: this.$store.getters.userInfo.userNo
          userNo: this.userInfo.userNo
        };

        beeUserFeedback(postData).then(() => {
          this.$toast('提交成功！');
          this.feedBackSuggestion = '';
          this.mobileNo = '';
        });
      }
    }
  };
</script>

<style lang="less">
  .ui_feedback {
    /*.feedback_trouble_container {*/
    /*margin-top: 30px;*/
    /*padding: 30px 30px 10px 30px;*/
    /*background-color: #fff;*/
    /*.van-checkbox-group {*/
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*.van-checkbox {*/
    /*width: 33.33%;*/
    /*margin-bottom: 20px;*/
    /*.van-checkbox--checked {*/
    /*border-color: #f7a427;*/
    /*background-color: #f7a427;*/
    /*}*/
    /*.van-checkbox__label {*/
    /*color: #5c5c5c;*/
    /*font-size: 24px;*/
    /*}*/
    /*}*/
    /*}*/
    /*}*/
    .feedback_your_suggestion_container {
      padding: 30px;
      .feedback_your_suggestion_textarea {
        width: 100%;
        height: 300px;
        vertical-align: middle;
        resize: none;
        border-color: #e1e1e1;
        border-radius: 10px;
        background-color: #fff;
        color: #999;
        font-size: 24px;
      }
      .feedback_your_suggestion_left_input {
        margin-top: 25px;
        text-align: right;
        color: #999;
        font-size: 24px;
      }
    }
    .feedback_your_contact_container {
      padding: 0 30px;
      .feedback_your_contact_text {
        margin-bottom: 20px;
      }
      .feedback_your_contact_input {
        display: block;
        width: 100%;
        height: 65px;
        padding-bottom: 20px;
        border: none;
        border-bottom:1px solid #e1e1e1;
        border-radius: unset;
        background-color: transparent;
        color: #5c5c5c;
        font-size: 32px;
      }
    }
    .feedback_submit_btn_container {
      margin-top: 20px;
      padding: 30px;
      .feedback_submit_btn {
        width: 100%;
        height: 90px;
        outline: none;
        border: none;
        border-radius: 45px;
        background-color: #f7a427;
        color: #fff;
        font-size: 36px;
        &.disable {
          background-color: #fbcb82;
        }
      }
    }
    .feedback_trouble_tip {
      margin-bottom: 30px;
      color: #333;
      font-size: 33px;
    }
  }
</style>